<template>
    <ColPage class="pt-content-menu" :class="{'pt-content-inner':inner}" :divider="divider">
        <template slot="top">
            <slot name="title" v-if="$slots.title"></slot>
<!--            <div class="title" v-else-if="title || pageTitle">{{title || pageTitle}}</div>-->
          <div class="title" v-else-if="isShowTilte"><span >{{$route.meta.title||''}}</span></div>
          <div v-else></div>
            <div class="search-wrapper">
              <QueryForm :queryForm="queryForm" :freshList="freshList" :updateQuery="updateQuery">
                <slot name="button"></slot>
              </QueryForm>
              <slot name="search"></slot>
            </div>
        </template>
        <template slot="content">
            <slot name="tagSelect"></slot>
            <slot name="content"></slot>
            <TableList ref="tableList" v-bind="_props" v-on="_events" v-if="showTable"></TableList>
        </template>
        <slot></slot>
    </ColPage>
</template>
<script>
    import ColPage from './page.vue'
    import pageTitle from '@/mixin/pageTitle'
    import propsMixin from '@/components/common/table-list/mixin'
    import QueryForm from './queryForm.vue'
    export default {
        name: 'MenuPage',
        components: {ColPage, QueryForm},
        mixins:[pageTitle,propsMixin],
        props: {
            showtitle:{
              type:Boolean,
              default:true
            },
           title:{
            type:String,
            default:''
           },
           inner:{
            type:Boolean,
            default:false
           },
           divider:{
            type:Boolean,
            default:false
           },
           query:{ //查询对象
            type:Object,
            default:() => {}
           }
        },
        computed: {
            isShowTilte(){
              return this.showtitle
            },
          
            showTable() {
                let props = Object.keys(this.$options.propsData);
                return props.includes('columns') && props.includes('data');
            },
            showQueryForm(){
                return this.columns.find(item => item.queryForm) ? true : false
            },
            queryForm(){
                let queryForm = this.columns.filter(item => item.queryForm).map(col => {
                    let { queryForm, title } = col;
                    return {
                        ...queryForm,
                        id:queryForm.key || col.key,
                        type:queryForm.component,
                        title:title,
                        sort:queryForm.component === 'Checkbox' ? 1 : queryForm.component === 'Select' ? 2 : 3
                    }
                });
                return [
                    {
                        type:'Button',
                        text:() => {
                            return `创建${this.title || this.pageBtnTxt}`
                        },
                        icon: 'md-add',
                        fun: this.addFun,
                        show: this._events['add'] ? true : false
                    },
                    ...queryForm.sort((a,b) => a.sort - b.sort),
                    {
                        type:'Button',
                        id:'refresh',
                        show: queryForm.length > 0
                    }
                ]
            }
        },
        data() {
            return {
                
            };
        },
        mounted(){
            this._query = {...this.query};
           
        },
        methods: {
            delSelectItem(val){
                this.$refs.tableList.delSelectItem(val)
            },
            closeItem(val){
                this.$refs.tableList.closeItem(val)
            },
            freshList(query = {}){
                Object.assign(this.query,query)
                this.$emit('update:page',1)
                this.$emit('queryFun',this.query)
            },
            updateQuery(query = {}){
                this.query && Object.assign(this.query,query)
            },
            addFun(){
                this.$emit('add')
            },
            delFun(){
                this.$emit('batchDel')
            },
        }
    };
</script>
<style scoped>
    /* 菜单页 */
    /deep/.pt-content-menu {
        background-color: var(--card-body-bgcolor);
        border-radius: 8px;
        height: 100% !important; 
        /* margin:30px; */
    }
    /deep/.pt-content-menu > .pt-content-top{
        padding:20px 20px 0;
    }
    /deep/.pt-content-menu > .pt-content-wrap {
        padding:0 20px 20px;
    }
    /deep/.pt-content-menu.pt-content-inner {
        margin-top:0px;
        height:100% !important;
    }
</style>